<template>
  <div class="history-data">
    <div class="history-data__content">
      <Table :columns="columns" :data="tableData" v-if="show" />
    </div>
    <van-pagination class="history-data__pagination" v-model="currentPage" :page-count="pageCount" />
  </div>
</template>

<script lang="ts">
import { Component, Vue, Watch } from 'vue-property-decorator';
import Table from '@/components/table';
import type { Columns } from '@/components/table';
import { mechanicalConfig } from '@/business/result/lib/mechanical-config';
import { lightningConfig } from '@/business/result/lib/lightning-config';
import { dcConfig } from "@/business/result/lib/dc-config";
import { loopConfig } from '@/business/result/lib/loop-config';
import { insulationConfig } from '@/business/result/lib/insulation-config'
import { dielectricConfig } from '@/business/result/lib/dielectric-config'
import { flattenedWithPath } from '@/business/result/lib/relay-config';
import { infraredConfig } from '@/business/result/lib/infrared-config';
import { mechanical, lightning, dcResistance, loopResistance, insulation, dielectric, relay, infrared } from '@/modules/const';
import { isEmpty, log } from '@/utils';

type eConfigItem = {
  groupName: string;
  label: string;
  value: string | number;
  group?: string;
  hide?: boolean;
  unit?: string;
}

@Component({
  name: 'History-Data',
  components: {
    Table,
  },
})
export default class HistoryData extends Vue {
  private currentPage = 1;
  private columns: Columns = [];
  private show = false;

  private getColumns(tableData: Partial<eConfigItem>[]): Columns {
    const hasGroup = Boolean(tableData.some((i) => i.group));
    const labelWithValue = [{
      field: 'label',
      headerName: '试验数据',
    }, {
      field: 'value',
      headerName: '数值',
    }]
    const group = [{
      field: 'groupName',
      headerName: '分组',
      mergeField: 'group',
    }]
    const result = hasGroup ? [...group, ...labelWithValue] : labelWithValue;
    return result;
  }

  private get history() {
    return this.$store.state.history;
  }

  private get pageCount() {
    return this.history.length;
  }

  private get tester() {
    return this.$store.state.tester;
  }

  private get config() {
    switch (this.tester) {
      case mechanical:
        return mechanicalConfig;
      case lightning:
        return lightningConfig;
      case dcResistance:
        return dcConfig;
      case loopResistance:
        return loopConfig;
      case insulation:
        return insulationConfig;
      case dielectric:
        return dielectricConfig;
      case infrared:
        return infraredConfig;
      default:
        return [];
    }
  }

  private tableData: Record<string, unknown>[] = [];

  mounted() {
    const currentPage = this.$route.params.idx;
    if (currentPage) {
      this.currentPage = Number(currentPage);
      this.onPageChange(this.currentPage);
    }
  }

  @Watch('currentPage')
  private onPageChange(newPage: number) {
    // 没有数据返回空
    if (!this.history.length) return this.tableData = [];
    this.show = true;
    let current = this.history[newPage - 1];
    console.log(current)

    if (this.tester === relay) {
      const result = JSON.parse(current.resultText);
      this.columns = this.getColumns(result);
      this.tableData = result;
      return;
    }
    // 直流电阻的多项电阻值保存成文本，需要解析出来
    if (this.tester === dcResistance) {
      const resistance = JSON.parse(current.resistanceText);
      current = { ...current, ...resistance };
      log(resistance, current)
    }

    const res = this.config.filter(i => (i.hideInHistory === false) || !i.hide).map((item) => {
      if (item.serverKey === '') {
        return {
          label: item.label,
          value: '-',
        };
      }
      const value = current[item.serverKey as keyof typeof current];
      const unit = item.unit ?? item.serverUnit ?? '';
      return {
        label: item.label,
        value: !isEmpty(value) ? `${value}${unit}` : '-',
      };
    });
    this.tableData = res;
    this.columns = this.getColumns(res);
  }

}
</script>

<style lang="scss" scoped>
$thColor: rgba(207, 226, 255, 0.2);

.history-data {
  width: 100%;
  padding-bottom: 50px;
  overflow-y: scroll;

  &__pagination {
    margin-top: 4px;
    text-align: center;
    width: 100%;
    background-color: #fff;
    position: absolute;
    ;
    bottom: 0;
  }

}
</style>
